{% extends 'base/base.html' %}
{% load static %}
{% block css %}
    <!-- Bootstrap-table -->
    <link rel="stylesheet" href="{% static 'css/bootstrap-table.min.css' %}">
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>脑出血患者问卷草稿箱管理
                        <small>草稿箱列表</small>
                    </h2>
                    <div class="clearfix"></div>
                </div><!-- x_title -->
                <div class="x_content">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <!-- 表格主体 -->
                        <table id="cgx-table" data-toggle="table" class="table table-bordered table-striped"></table>
                        <!-- 表格工具栏 -->
                        <div id="toolbar">  
                            <div class="btn-group">
                                <!-- 新增用户 -->
                                <button class="btn btn-info btn-sm" onclick="addQue()">
                                    <i class="glyphicon glyphicon-plus">填写问卷</i>
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="deleteMulQue()">
                                    <i class="glyphicon glyphicon-trash">删除所选</i>
                                </button>
                            </div><!-- btn-group -->
                            <input type="text" name="" id="searchText">
                            <button id="searchButton" onclick="searchButton()" class="btn btn-primary btn-sm">查询</button>
                            <button id="resetButton" onclick="resetButton()" class="btn btn-primary btn-sm">重置</button>           
                        </div><!-- toolbar -->
                    </div><!-- col-md-12 col-sm-12 col-xs-12 -->
                </div><!-- x_content -->
            </div><!-- x_panel -->
        </div><!-- col-md-12 col-sm-12 col-xs-12 -->
    </div><!-- row -->
    <!-- 模态框-单选删除提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteQue">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">提示信息</h4>
            </div>
            <div class="modal-body">
              <h4>您确定要删除这条问卷记录吗？</h4>
              <h5 id="deleteQueName"></h5>
              <!-- 隐藏需要删除的ID -->
              <input type="hidden" name="" id="deleteQueId">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success" onclick="deleteConfirm()">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 模态框-多选删除提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteMulQue">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">提示信息</h4>
            </div>
            <div class="modal-body">
              <h4 id="deleteQueLength"></h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success" onclick="deleteMulConfirm()">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- 模态框-0选中提示 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="zeroSelect">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
              <h4>请至少选择1条数据进行批量删除！</h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}

{% block js %}
    <!-- Bootstrap-table -->
    <script src="{% static 'js/bootstrap-table.min.js' %}"></script>

    <script>
        /* 请求草稿箱数据 */
        var url = '/pcpages/solveQueCgx1/' 
        /* 定义表格 */
        $('#cgx-table').bootstrapTable({
            url: url,                       //通过url从后台获取数据
            method: 'GET',                  //请求方式
            dataType: 'json',               //数据类型
            uniqueId: 'id',                //每一行的唯一标识，一般为主键列
            striped: true,                  //是否显示行间隔色
            cache: false,                   //是否使用缓存
            sortable: true,                 //是否启用排序
            sortOrder: 'desc',              //排序方式
            sidePagination: 'server',       //分页方式：client客户端分页，server服务端分页
            undefinedText: '数据错误',       //undefined格式数据的默认显示
            singleSelect: false,            //开启单选，获取选中的行数必须要有该参数
            toolbar: '#toolbar',            //工具按钮选择哪个容器
            search: false,                  //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            showColumns: true,              //是否显示所有的列（选择显示的列）
            minimumCountColumns: 2,         //最少允许的列数
            showRefresh: true,              //是否显示刷新按钮
            showToggle: true,               //是否显示详细视图和列表视图的切换按钮
            cardView: false,                //是否显示详细视图
            detailView: false,              //是否显示父子表
            clickToSelect: true,            //是否启用点击选中行
            pagination: true,               //是否显示分页
            pageNumber: 1,                  //初始化加载第一页，默认第一页
            pageSize: 10,                   //每页的记录行数
            pageList: [10, 20, 50, 100],    //可供选择的每页的行数
            paginationPreText: "上一页",     
            paginationNextText: "下一页",   
            queryParamsType: "",            //自定义的参数，会在url后面进行拼接       
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也要该城遗址的
                var temp = {
                    'pageSize': params.pageSize,    //每页多少条数据
                    'pageNumber': params.pageNumber,//页码
                    'searchText': $('#searchText').val(),//查询内容
                }
                return temp;
            },
            columns: [
                {
                    checkbox: true,          //第一页显示复选框
                },   
                {
                    field: 'searchName',
                    title: '填表人签名',
                    align: 'center',
                    
                },
                {
                    field: 'name',
                    title: '患者姓名',
                    align: 'center',
                },
                {
                    field: 'phone',
                    title: '填表人联系电话',
                    align: 'center',
                },
                {
                    field: 'date',
                    title: '填表人填写日期',
                    align: 'center',
                },
                {
                    field: 'state',
                    title: '问卷状态',
                    align: 'center',
                    formatter: queStateFormatter
                },
                {
                    field: '',
                    title: '操作状态',
                    align: 'center',
                    events: {
                        'click #delete': function(e, value, row, index) {
                            /* 获取选中行的数据，进入删除信息提示界面 */
                            deleteQue(row)
                        },
                        'click #edit': function(e, value, row, index){
                            /* 获取选中行的数据，进入问卷编辑页面 */
                            editQue(row)
                        },
                        'click #view': function(e, value, row, index){
                            /* 获取选中行的数据，进入问卷查看页面 */
                            viewQue(row)
                        }
                    },
                    formatter: operateFormatter,
                },   
            ],
        })
        /* 使用格式化函数，指定操作栏 */
        function operateFormatter(value, row, index){
            var result = ""
            if(row.state == 0 || row.state == 1){
                result += '<button type="button" id="edit" class="btn btn-warning btn-xs">编辑问卷</button>'
            }else{
                /* 审核状态和通过审核状态时禁用删除 */
                result += '<button type="button" id="view" class="btn btn-success btn-xs">查看问卷</button>'
            }
            result += '<button type="button" id="delete" class="btn btn-danger btn-xs">删除问卷</button>'
            return result
        }
        /* 使用格式化函数，指定问卷状态 */
        function queStateFormatter(value, row, index){
            var result = ""
            if(row.state == 0){
                result = '<span class="btn btn-danger btn-xs">待填写</span>'
            }
            else if(row.state == 1){
                result = '<span class="btn btn-warning btn-xs">待提交</span>'
            }
            else if(row.state == 2){
                result = '<span class="btn btn-info btn-xs">已提交</span>'
            }
            else if(row.state == 3){
                result = '<span class="btn btn-success btn-xs">审核通过</span>'
            }
            return result
        }
        /* 复选框的格式化函数 */
        function checkboxFormatter(value, row, index){
            /*  审核状态和通过审核状态时禁用多选，防止被删除 */
            if(row.state == 2 || row.state == 3){
                return {
                    disabled : true
                }
            }
        }
        /* 显示单选删除信息 */
        function deleteQue(que) {
            /* 传入用户对象，并且获取用户id */
            let deleteQueId = que.id
            let deleteQueName = que.name
             /* 手动打开模态框，询问是否删除 */
             $('#deleteQueId').val(deleteQueId)
             document.getElementById('deleteQueName').innerHTML = '被调查者姓名：' + deleteQueName
             $('#deleteQue').modal('show')
        }
        /* 执行单选删除操作 */
        function deleteConfirm(){
            //获取需要删除用户的ID
            let deleteQueId = $('#deleteQueId').val()
            //统一转化为数组形式，给后端处理
            let arr = []
            arr.push(deleteQueId)
            //向后端发送删除请求
            $.ajax({
                url: '/pcpages/deleteQue1/',
                type: 'POST',
                data: {
                    'queId': arr,
                },
                success: function(arg){
                   var dict = JSON.parse(arg)
                   /* 删除成功，则更新表格 */
                   if(dict.status){
                       $('#cgx-table').bootstrapTable('refresh',{url: url})
                   }
                   /* 关闭框选 */
                   $('#deleteQue').modal('hide')
                }
            })
        }
        /* 显示多选删除信息 */
        function deleteMulQue(){
            /* 获取选中的数据对象的长度 */
            let deleteLength = $('#cgx-table').bootstrapTable('getSelections').length
            /* 判定没有选择任何数据的情况 */
            if(deleteLength == 0){
                $('#zeroSelect').modal('show')
                return
            }
            $('#deleteQueLength').html("您确定要删除选中的"+deleteLength+"条问卷吗？")
            /* 打开批量删除提示框 */
            $('#deleteMulQue').modal('show')

        }
        /* 执行多选删除操作 */
        function deleteMulConfirm(){
            /* 获取选中的数据 */
            let deleteMulQue = $('#cgx-table').bootstrapTable('getSelections').map((d,i)=>{
                return d.id
            })
            $.ajax({
                url: '/pcpages/deleteQue1/',
                type: 'POST',
                data: {
                    'queId': deleteMulQue,
                },
                success: function(arg){
                    /* 判断状态 */
                    var dict = JSON.parse(arg)
                    /* 如果删除成功，更新表格 */
                    if(dict.status){
                        /* $('#user-table').bootstrapTable('remove',{
                            //field决定根据哪个字段删除
                            field: 'id',
                            //value决定字段的值
                            values: deleteMulId
                        }) */
                        //仅删除具有局限性，应该直接刷新数据
                        $('#cgx-table').bootstrapTable('refresh',{url: url})
                    }
                    /* 关闭框选 */
                    $('#deleteMulQue').modal('hide')
                    
                }
            })
        }
        /* 查询按钮触发函数 */
        function searchButton(){
            $('#cgx-table').bootstrapTable('refresh',{url: url})
        }
        /* 重置触发函数 */
        function resetButton(){
            $('#searchText').val('')
            $('#cgx-table').bootstrapTable('refresh',{url: url})
        }
        /* 填写问卷 */
        function addQue(){
            /* 实现页面跳转 */
            window.location = "/pcpages/pcpages/no1/"
        }
        /* 执行编辑操作 */
        function editQue(row){
            /* 实现页面跳转 */
            window.location = "/pcpages/editQue1/"+row.id+"/"
        }
        /* 执行查看操作 */
        function viewQue(row){
            /* 实现页面跳转 */
            window.location = "/pcpages/editQue1/"+row.id+"/"
        }
    </script>

{% endblock %}
